<div class="project-card submission-card"
     data-project-id="<%= project.id %>"
     style="position: relative;">
  <div class="project-card-image-container">
    <%= helpers.image_tag(
          project.circuit_preview.attached? ? project.circuit_preview : helpers.image_path("empty_project/default.png"),
          alt: project.name,
          class: "project-card-image"
        ) %>
  </div>
  <div class="project-card-content">
    <div class="project-card-header">
      <div class="project-card-title">
        <h3><%= project.name %></h3>
      </div>
      <div class="project-card-stats">
        <div class="project-card-stat">
          <i class="fas fa-star" aria-hidden="true"></i>
          <span><%= project.stars_count %></span>
        </div>
        <div class="project-card-stat">
          <i class="fa fa-eye" aria-hidden="true"></i>
          <span><%= project.view %></span>
        </div>
      </div>
    </div>
    <div class="project-card-author">
      <%= helpers.image_tag("svgs/user.svg", alt: "User") %> <%= project.author.name %>
    </div>
    <div class="project-card-description">
      <%= sanitize project.description %>
    </div>
    <% if project.description && project.description.length > 120 %>
      <div class="show-more-container">
        <span class="show-more-btn"><%= t("components.project.show_more") %></span>
      </div>
    <% end %>
  </div>
  <%= link_to user_project_path(project.author, project),
              target: "_blank",
              rel: "noopener noreferrer",
              class: "project-card",
              aria: { label: t("components.project.open_project", default: "Open project") },
              style: "position:absolute; inset:0; z-index:1; text-indent:-9999px; border:0; background:transparent; box-shadow:none; display:block;" do %>
    <span></span>
  <% end %>
</div>
